<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.js"></script>
<div id="root">
	 <parent></parent><!--这就是所谓的父组件-->
</div>
<script>
/**
 * [vm description]
 * @type {Vue}
 * 组件实例的作用域是孤立的。这意味着不能 (也不应该) 
 * 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，
 * 需要通过子组件的 props 选项
 */
 	var childNode = {
	 template: '<div>{{message}}</div>',
	 props:['message'],
	}
	var parentNode = {
	 template: `
	 <div class="parent">
	 <child message="aaa"></child>
	 <child message="bbb"></child>
	 </div>`,
	 components: {
	 'child': childNode
	 }
	};
	var vm = new Vue({
		el : '#root',
		data :{

		},
		components : {
			'parent' : parentNode,
		}
	});
</script>	
</body>
</html>